<template>
  <div class="content_main">
    <div class="main_box">
      <el-button type="" plain @click="back">返回</el-button>
      <el-button type="primary" plain @click="openDialog">添加新的板块</el-button>

      <el-table
        ref="classData"
        :data="classData"
        :header-cell-style="{
          'background-color': '#fafafa',
          'color': 'rgb(35, 35, 35)',
          'border-bottom': '1px #409EFF solid'
        }"
        style="width: 100%; margin-top: 10px; font-size: 13px;"
      >
        <el-table-column
          fixed
          prop="id"
          label="板块ID"
          width="100"/>

        <el-table-column
          fixed
          prop="name"
          label="板块名称"
          width="200"/>

        <el-table-column
          fixed
          prop="status"
          label="小程序是否展示板块"
          width="200">
          <template slot-scope="scope">
            <el-switch
              v-model="scope.row.status == 1 ? true : false"
              @change="changStatus(scope.row.id)"
            />
          </template>
        </el-table-column>

        <el-table-column label="操作">
          <template slot-scope="scope">
            <!--<el-button  size="mini" @click="updateP(scope.$index, scope.row)">编辑板块</el-button>-->
            <!--<el-button  size="mini" @click="delP(scope.$index, scope.row)">删除项目</el-button>-->
            <!--<el-button type="danger" @click="delTeamUser(scope.$index, scope.row)" round>移出团队</el-button>-->

          </template>
        </el-table-column>
      </el-table>

      <el-dialog
        :visible.sync="addClassDialog"
        :before-close="handleClose"
        title="添加新板块"
        width="600px">

        <el-row>
          <el-col :span="12">
            <label for="" style="position:relative; float: left;top: 10px;">板块名称：</label>
            <el-input v-model="name" style="float: left;width: 200px;" placeholder="请输入内容"/>
          </el-col>
        </el-row>

        <el-button type="primary" style="margin-top: 20px;" @click="addClass">添加板块</el-button>
        <el-button type="primary" style="margin-top: 20px;" @click="updateClass">更新板块</el-button>

      </el-dialog>

    </div>
  </div>
</template>

<script>
import t from './../../utils/request'

export default {
  name: 'Login',
  components: {
  },
  data() {
    return {
      classData: [],
      keyword: '',
      currentProjectId: 0,
      addClassDialog: false,
      name: ''
    }
  },
  mounted() {
    this.currentProjectId = document.location.href.split('#')[1].split('/')[3]
    console.log(this.currentProjectId, 999)
    this.renderList()
  },
  created() {
    // window.addEventListener('hashchange', this.afterQRScan)
  },
  destroyed() {

  },
  methods: {
    // 订单数据绑定
    ClassList(data) {
      var CList = data.data.data
      var ClassOptions = []
      for (var i = 0; i < CList.length; i++) {
        var option = CList[i]
        // 数据绑定
        ClassOptions.push(option)
      }
      return ClassOptions
    },

    renderList() {
      t.toPost('/admin/class/list', {
        pid: this.currentProjectId
      }, (res) => {
        this.classData = this.ClassList(res)
      })
    },

    openDialog() {
      this.addClassDialog = true
    },

    handleClose() {
      this.addClassDialog = false
    },

    addClass() {
      t.toPost('/admin/class/add', {
        pid: this.currentProjectId,
        name: this.name
      }, (res) => {
        if (res.code == '000000') {
          this.handleClose()
          this.renderList()
        }
      })
    },

    changStatus(id) {
      t.toPost('/admin/class/set', {
        id: id
      }, (res) => {
        console.log(res)
        if (res.code == '000000') {
          this.handleClose()
          this.renderList()
        }
      })
    },

    back() {
      this.$router.back()
    }

  }
}
</script>

<style scoped>

</style>
